<form>
    <div class="form-group form-inline">
        Full text search:
        <input class="form-control ml-2" type="text" name="searchTerm"
            [(ngModel)]="auditService.searchTerm" />
        <span class="ml-3" *ngIf="auditService.loading$ | async">Loading...</span>
    </div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col" sbSortable="timestamp" (sort)="onSort($event)">
                    <span>Time</span>
                    <sb-sort-icon *ngIf='sortedColumn === "timestamp"' [direction]="sortedDirection"></sb-sort-icon>
                </th>
                <th scope="col"><span>User</span></th>
                <th scope="col"><span>Action</span></th>
                <th scope="col"><span>Trigger</span></th>
                <th scope="col"><span>Payload</span></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let audit of audits$ | async">
                <td scope="row">{{ audit.timestamp | date:'short' }}</td>
                <td>
                    <ngb-highlight [result]="audit.user" [term]="auditService.searchTerm"></ngb-highlight>
                </td>
                <td>
                    <ngb-highlight [result]="audit.value.resource" [term]="auditService.searchTerm"></ngb-highlight>
                </td>
                <td>
                    {{ mapTrigger(audit.value.accept) }}
                </td>
                <td>
                    {{ audit.value.body | json }}
                </td>
            </tr>
        </tbody>
    </table>
    <div class="d-flex justify-content-between p-2">
        <ngb-pagination [collectionSize]="(total$ | async) || 0"
            [(page)]="auditService.page"
            [pageSize]="auditService.pageSize"
            [maxSize]="5"
        ></ngb-pagination>
        <select class="custom-select" style="width: auto"
            name="pageSize" [(ngModel)]="auditService.pageSize">
            <option [ngValue]="10">10 items per page</option>
            <option [ngValue]="20">20 items per page</option>
            <option [ngValue]="MAX_ITEMS">All</option>
        </select>
    </div>
</form>
